<template>
  <CommonPage title="会员等级定义">
    <template #mid>
      <SearchForm>
        <template #extraButtons>
          <a-button type="primary" @click="showCreateModal">新增会员等级</a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable
      :columns="columns"
      row-key="levels"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }: BodyCellOptions<Partial<MemberLevelItem>>">
        <div v-if="column.key === 'oper'">
          <a @click="showUpdateModal(record)">编辑</a>
          <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
        </div>
      </template>
    </SlTable>
    <CURDDialog
      ref="CURDModalIns"
      id-key="levels"
      :columns="columns"
      create-title="新增会员等级"
      update-title="编辑会员等级"
      delete-message="确认删除该会员你等级吗？"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :table-data="tableData"
      :curd="curd"
      :reload-table="reloadTable"
    />
  </CommonPage>
</template>
<script lang="ts" setup>
import { ref, shallowRef } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { FormItemComponentType, CURDAction, CURDDialogExpose } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions, CURDModalEvent } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { MemberLevelItem } from "/@/api/main/member/models";
import { Api } from "/@/api/main/member";
import type { BodyCellOptions } from "/@/types/antd";

const { t } = useI18n();
const columns = ref<TableProps<Partial<MemberLevelItem>>["columns"]>([
  {
    title: "等级",
    dataIndex: "levels",
  },
  {
    title: "等级名称",
    dataIndex: "name",
  },
  {
    title: "等级条件",
    dataIndex: "geScore",
    customRender({ text, record }) {
      const arr: (string | number)[] = [];
      if (text) {
        arr.push(text);
      }
      arr.push("积分");
      if (record.ltScore) {
        arr.push(record.ltScore);
      }
      return arr.length > 1 ? arr.join("<=") : "--";
    },
  },
  {
    title: t("common.oper"),
    key: "oper",
    width: 100,
  },
]);
const model = ref<Partial<MemberLevelItem>>({
  levels: null,
  name: "",
  geScore: null,
  ltScore: null,
});
const modelFormSetting: FormItemData<Partial<MemberLevelItem>>[] = [
  {
    key: "levels",
    required: true,
    label: "等级",
    type: FormItemComponentType.NUMBER,
    props: {
      min: 1,
      max: 999,
    },
  },
  {
    key: "name",
    label: "等级名称",
    required: true,
  },
  {
    key: "geScore",
    label: "积分下限",
    required: true,
    type: FormItemComponentType.NUMBER,
    props: {
      min: 0,
      max: 99999,
    },
  },
  {
    key: "ltScore",
    label: "积分上限",
    required: true,
    type: FormItemComponentType.NUMBER,
    props: {
      min: 0,
      max: 99999,
    },
  },
];

const CURDModalIns = shallowRef<CURDDialogExpose>();
const showOptions = ref<ShowCURDModalOptions>();

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<MemberLevelItem>({
  getDataUrl: Api.memberLevelList,
  cudUrl: Api.memberLevel,
});
function showCreateModal() {
  showOptions.value = { action: CURDAction.CREATE };
}
function showUpdateModal(record) {
  showOptions.value = { action: CURDAction.UPDATE, record };
}
function handleDelete(record) {
  showOptions.value = { action: CURDAction.DELETE, record };
}
</script>
